import React, { Component } from 'react';
import CommentAdd from '../comment-add/comment-add';
import CommentList from '../comment-list/comment-list';
class App extends Component {

	constructor(props) {
		super(props)
		this.addComment = this.addComment.bind(this);
		this.delComment = this.delComment.bind(this);
		this.state = {
			comments: [
				{
					username: "Tom",
					content: "react测试"
				},
				{
					username: "Jack",
					content: "vue可以吗"
				}
			]
		}
	}

	addComment(comment) {
		const { comments } = this.state;
		comments.push(comment)
		this.setState({
			comments
		})
	}

	delComment(index) {
		const { comments } = this.state;
		comments.splice(index, 1)
		this.setState({
			comments
		})
	}

	render() {

		const { comments } = this.state
		return (
			<div id="app">
				<div>
					<header className="site-header jumbotron">
						<div className="container">
							<div className="row">
								<div className="col-xs-12">
									<h1>请发表对React的评论</h1>
								</div>
							</div>
						</div>
					</header>
					<div className="container">
						<CommentAdd addComment={this.addComment} />
						<CommentList comments={comments} delComment={this.delComment} />
					</div>
				</div>
			</div>
		)
	}
}

export default App;